<template>
    <div class="scheduleDetail-container">
        <div class="imgWrapper">
            <img src="http://guijiwenhua.oss-cn-hangzhou.aliyuncs.com/20190416/ea96e15f34394329aaf81523af766250.jpg"
                 width="100%">
        </div>
        <article class="intro-container">
            <section class="intro-wrapper">
                <div class="intro-item" v-for="item,index in scheduleDetail" :key="index">
                    <van-row>
                        <van-col span="8">
                            <div class="intro-text" style="margin-left: 10px"><i></i><span>{{item.title||''}}</span>
                            </div>
                        </van-col>
                        <van-col span="16" :class="item.key!=='csAddress'?'intro-value':'intro-value withWrap'" style="color: #627e94;">
                            {{item.value}}
                        </van-col>
                    </van-row>
                </div>
                <div class="intro-item btn" v-if="showAddress" @click="toRecommendAddress()"> <!--控制填写地址显示 隐藏-->
                    <van-button size="large">{{addressText}}</van-button>
                </div>
            </section>
        </article>
    </div>
</template>

<script>
    const DETAIL_INFOS = [
        {key: 'activityName', "title": "活动名称", value: ''},
        {key: 'updateTime', "title": "达标时间", value: ''},
        {key: 'count', "title": "达标人数", value: ''},
        {key: 'goalRecords', "title": "奖品", value: ''},
        {key: 'csTel', "title": "联系电话", value: ''},
        {key: 'expressCp', "title": "快递公司", value: '', hide: false},
        {key: 'expressNumber', "title": "快递单", value: '', hide: false},
        {key: 'isshipStr', "title": "是否发货", value: '', hide: false},
        {key: 'csName', "title": "收货人", value: ''},
        {key: 'csAddress', "title": "收货地址", value: ''},
    ]
    import {Button} from 'vant';
    import Vue from 'vue'
    import {escape2Html} from '../../utils/tools'

    Vue.use(Button);
    export default {
        name: "scheduleDetail",
        data() {
            return {
                scheduleDetail: [],
                id: '',
                showAddress: false,
                activityId: '',
                addressText: '填写收货地址',
                operation: '',
            }
        },
        created() {
            if (null != this.$route.query.id) {
                this.id = this.$route.query.id;
                this.getDetail();
            }
        },
        computed: {

        },
        methods: {
            toRecommendAddress() {
                this.$router.push({
                    path: "/recommend_address",
                    query: {
                        activityId: this.activityId,
                        operation: this.operation,
                        scheduleId: this.id
                    }
                });
            },
            getDetail() {
                this.$api.personInf.recommendActivityScheduleDetail({scheduleId: this.id}).then(res => {
                    if (res.code == 0) {
                        let item = res.data;
                        console.log(item);

                        this.activityId = item.activityId;
                        this.scheduleDetail = DETAIL_INFOS;
                        this.scheduleDetail.forEach(elem => {
                            if (elem.key == 'activityName') {
                                elem.value = item[elem.key] ? escape2Html(item[elem.key]) : item[elem.key]
                            } else {
                                elem.value = item[elem.key]
                            }
                            if ((elem.key == 'expressCp' || elem.key == 'expressNumber')) {
                                if (item.isship == 0) {
                                    elem.hide = true
                                }
                            }
                        })
                        //todo 控制显示隐藏逻辑
                        if (item.isship == 0) {
                            this.showAddress = true;
                        }

                        if (item.csAddress && item.csAddress.length > 0) {
                            this.operation = 'edit';
                            this.addressText = '修改收货地址';
                        } else {
                            this.operation = 'add';
                            this.addressText = '填写收货地址';
                        }

                    } else {
                        Toast(res.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }


        },
        beforeRouteLeave(to, from, next) {
            next();
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/less/base";

    .scheduleDetail-container {
        margin: 10px;
        background: #f1f5f8;
        .imgWrapper {
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            background-color: #fff;
            img {
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
            }
        }
        .intro-container {
            padding: 10px 0 60px;
            background: #ffffff;
            height: 100%;
            .intro-wrapper {
                text-align: start;
                .intro-item {
                    height: 20px;
                    margin: 20px 0;
                    .intro-text {
                        height: 20px;
                        line-height: 20px;
                        padding: 2px 0;
                        color: @front-font-color;
                        i {
                            vertical-align: top;
                            display: inline-block;
                            height: 20px;
                            line-height: 20px;
                            width: 3px;
                            background: url("/images/weixin2/hbg1.png") no-repeat;
                            /*background-color: @main-theme-color;*/
                            /*border-radius: 20%;*/
                        }
                        span {
                            padding-left: 10px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                    .intro-value {
                        padding: 2px 0;
                        color: @front-font-color;
                        word-wrap: break-word;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        &.withWrap {
                            white-space: normal;
                        }
                    }
                    .intro-value.pb50 {
                        padding-bottom: 50px;
                    }
                    &.btn {
                        padding: 0 10px;
                        .van-button {
                            border-radius: 10px !important;
                            color: #ffffff;
                            background-color: @main-theme-color !important;
                        }
                    }
                }
            }
        }

    }

</style>
